<template>
  <div>

    <card style="margin-top: 20px;">
      <row>

        <Upload
          ref="upload"
          action="/api/book/excel/import"
          name="excel-file"
          :show-upload-list="true"
          :on-format-error="handleFormatError"
          :on-success="handleSuccess"
          :on-error="handleError"
          :format ="['xlsx','xls']">
          <Button type="info" icon="ios-cloud-upload-outline">批量导入</Button>
        </Upload>
      </row>
      <row>
        <Input search placeholder="Enter something..." />
      </row>
       <Row style="margin-top: 20px;">
         <i-col span="4">
         姓名：
         </i-col>
         <i-col span="12">
           <Input clearable autofocus v-model="data.date" placeholder="Enter something..." style="width: 300px;" />
         </i-col>
       </Row>
      <Row style="margin-top: 20px;">
        <i-col span="4">
          出生日期：
        </i-col>
        <i-col span="12">
          <DatePicker type="date" v-model="data.date" clearable placeholder="Select date" style="width: 200px"></DatePicker>
        </i-col>

      </Row>

      <Row>
        <i-col span="8">
          <Button @click="submitForm" style="margin-top:10px;">提交</Button>
        </i-col>
        <i-col span="16">
        </i-col>
      </Row>

    </card>
    <Card style="margin-top: 20px;">
      <Row>
        <i-col span="8">
          <Button @click="click" style="display: block">点击测试触发程序错误!</Button>
          <Button @click="ajaxClick" style="margin-top:10px;">点击测试触发ajax接口请求错误</Button>
        </i-col>
        <i-col span="16">
        </i-col>
      </Row>
    </Card>
    <Row class="margin-top-10">
      <Table :columns="tableTitle" :data="tableData"></Table>
    </Row>
  </div>

</template>

<script>

import { getData } from '@/api/data'
import { saveForm } from '../../api/data'
import Form from './form'
export default {
  name: 'demo_page',
  components: { Form },
  methods: {
    getDataGrid () {
      var _this = this
      getData(this.date).then(res => {
        _this.tableData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    ajaxClick () {
      const formData = new FormData()
      debugger
      formData.append('name', this.name)
      formData.append('date', this.date)
      getData(this.date).then(res => {
        this.open(res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    open (pars) {
      this.$Notice.open({
        title: 'Notification title',
        desc: pars
      })
    },
    submitForm () {
      saveForm(this.data).then(res => {
        this.open(res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    handleFormatError(file){
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。'
      })
    },
    handleSuccess(res,file){
      if(res.errcode === 0){
        this.dialoLead = false
        this.$Message.success("数据导入成功！")
        this._getBookList()
        this.$refs.upload.clearFiles()
      }
    },
    handleError(error,file){
      this.$Message.error("数据导入失败！")
    }
  },
  data () {
    return {
      name: '',
      data: {},
      tableTitle: [
        {
          title: '一级分类',
          key: 'category1'
        },
        {
          title: '二级分类',
          key: 'category2'
        },
        {
          title: '三级分类',
          key: 'category3'
        }
      ],
      tableData: [
        {
          category1: 1,
          category2: 2,
          category3: 3
        },
        {
          category1: 4,
          category2: 5,
          category3: 6
        },
        {
          category1: 7,
          category2: 8,
          category3: 9
        }
      ]
    }
  }
}
</script>

<style>

</style>
